<template>
  <div class="padding">
    <h4 class="margin-bottom">文本格式化工具</h4>

    <textarea rows="16" class="textarea code margin-bottom" v-model="content"></textarea>

    <el-button title="大小写转换" @click="toUpperLower">UPPER/lower</el-button>
    <el-button title="大小写转换（首字母）" @click="toUpperLower1">UPPER/lower 1</el-button>
    <el-button title="驼峰式/下划线转换" @click="toCamelSnack">camel/snack</el-button>
    <el-button title="下划线/空格转换" @click="toSnackSpace">snack/space</el-button>
    <el-button title="大小写转换（单词首字母）" @click="toTitleArticle">title/article</el-button>
    <el-button title="JSON格式化" @click="toJson">JSON</el-button>
  </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            content: '',
            is_upper: false
        };
    },
    mounted() {
    },
    methods: {
        toUpperLower() {
            if(this.is_upper){
                this.content = this.content.toLowerCase();
            } else {
                this.content = this.content.toUpperCase();
            }
            this.is_upper = !this.is_upper;
        },

        toUpperLower1() {
            if(this.is_upper){
                this.content = this.content.charAt(0).toLowerCase() + this.content.slice(1);
            } else {
                this.content = this.content.charAt(0).toUpperCase() + this.content.slice(1);
            }
            this.is_upper = !this.is_upper;
        },

        toCamelSnack() {
            if(this.is_upper){
                this.content = this.content.replaceAll(/_([a-z])/g, (g) => g[1].toUpperCase());
            } else {
                this.content = this.content.replaceAll(/([A-Z])/g, '_$1').toLowerCase();
            }
            this.is_upper = !this.is_upper;
        },


        toSnackSpace() {
            if(this.is_upper){
                this.content = this.content.replaceAll('_', ' ');
            } else {
                this.content = this.content.replaceAll(' ', '_');
            }
            this.is_upper = !this.is_upper;
        },

        toTitleArticle() {
            try {
                this.content = this.content.toLowerCase();
            } catch (e) {
                console.log(e);
            }
        },

        toJson(){
            let json = JSON.parse(this.content);
            this.content = JSON.stringify(json, null, 4);
        }
    }
};
</script>

<style scoped>
</style>
